<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" color="#fff" :isLeft="true">
      <template #title><text style="color: #fff">填写订单</text></template>
    </GlobalTopBar>

    <view class="page_content">
      <image
        class="topimg"
        :src="`${store.imgDomain}porder_1.png`"
        mode="scaleToFill"
      />
      <view class="centerb">
        <!--顶部地址 -->
        <view class="topbox">
          <view class="dztext" @click="store.to('/pages/my/myaddress?type=1')">
            <image
              class="dzimg"
              :src="`${store.imgDomain}porder_2.png`"
              mode="scaleToFill"
            />
            <view class="text" v-if="AddressInfo.province_name">
              <view class="t1">{{
                `${AddressInfo.province_name}${AddressInfo.city_name}${AddressInfo.district_name}${AddressInfo.address}`
              }}</view>
              <view class="t2"
                >{{ AddressInfo.contact_name }} {{ AddressInfo.phone }}
              </view>
            </view>
            <view v-else class="wdz_box flex_center">
              <text style="font-size: 30rpx; font-weight: 700">
                请填写服务地址
              </text>
            </view>
            <uni-icons type="right" size="24"></uni-icons>
          </view>
          <!-- 上门时间 -->
          <view class="timeb" @click="drawerRef.open()">
            <view class="t1">上门时间</view>
            <view class="t2"
              >{{
                timeIs
                  ? `${TimeList[indexs].date}(${TimeList[indexs].week}) ${timeIs}`
                  : '请选择'
              }}
              <view style="transform: translateY(2rpx)">
                <uni-icons type="right" size="18"></uni-icons>
              </view>
            </view>
          </view>
        </view>
        <!-- 中间内容 -->
        <view class="centerbox">
          <view class="dbj">{{
            OrderInfo?.goods_info?.goods_type == 2 ? '上门报价' : '固定服务'
          }}</view>

          <view class="tb1">
            <view class="tbtop">
              <view class="flex">
                <image
                  class="himg"
                  :src="OrderInfo.goods_info?.thumbnail"
                  mode="aspectFill"
                />
                <view class="tbox">
                  <view class="t1">{{
                    OrderInfo?.goods_info?.goods_title
                  }}</view>
                  <view class="t2" v-if="OrderInfo?.goods_info?.goods_type">{{
                    OrderInfo?.goods_info?.goods_type == 2
                      ? '上门报价'
                      : `￥${OrderInfo?.goods_info?.buy_price}`
                  }}</view>
                </view>
              </view>
              <view class="rtext"
                ><uni-icons type="closeempty" size="16"></uni-icons> 1
              </view>
            </view>
            <!-- 订单备注 -->
            <view class="bz flex">
              <text>订单备注</text>
              <input
                v-model="formData.remark"
                type="text"
                placeholder="请输入您的要求"
              />
            </view>
          </view>
          <view class="tb2">
            <text>添加图片（最多上传5张）</text>
            <view class="ulimgbox" v-if="imgList.length">
              <view
                class="lib"
                v-for="(item, index) in imgList"
                :key="index + 1"
              >
                <image :src="item" mode="aspectFill" />
                <view class="close2" @click="imgList.splice(index, 1)">
                  <image
                    class="close2_img"
                    :src="`${store.imgDomain}close2.png`"
                    mode="scaleToFill"
                  />
                </view>
              </view>
            </view>

            <view
              class="scb flex_center"
              @click="chooseImage"
              v-if="imgList.length < 5"
            >
              <uni-icons type="plusempty" size="30" color="#4D738D"></uni-icons>
            </view>
          </view>
        </view>
        <!-- 券 -->
        <view class="ulbox">
          <view class="libo flex">
            <view class="t1">上门费</view>
            <view class="t2">
              {{ `￥${OrderInfo?.goods_info?.housefee_price}` }}</view
            >
          </view>
          <view
            class="libo flex"
            v-if="OrderInfo?.user_info?.level_percent != 100"
          >
            <view class="t1">会员折扣</view>
            <view class="t2"> {{ `${allPriceInfo.discount}折` }}</view>
          </view>
          <view
            class="libo flex"
            v-if="OrderInfo?.user_info?.level_percent != 100"
          >
            <view class="t1">会员折扣价</view>
            <view class="t2"> {{ `${allPriceInfo.discount_price}` }}</view>
          </view>
          <view class="libo flex" @click="hbFun">
            <view class="t1">优惠券</view>
            <view class="t2" v-if="!OrderInfo.valid_coupons?.length">
              <text style="font-size: 24rpx; color: #999">暂无可用优惠券</text>
            </view>
            <view class="t3box" v-else>
              <view class="t3 flex" v-if="!couponList.length"
                ><text>
                  {{
                    !couponList.length
                      ? `未选优惠券，请选择`
                      : `优惠${allPriceInfo.coupon_price}元`
                  }}
                </text>
                <view style="transform: translateY(2rpx)">
                  <uni-icons
                    type="forward"
                    size="14"
                    color="#fff"
                  ></uni-icons> </view
              ></view>

              <view
                v-else
                class="t3 flex t4"
                style="justify-content: center"
                :class="{ ac: index === couponList.length - 1 }"
                v-for="(item, index) in couponList"
                :key="index + 1"
              >
                <view class="t3_item">
                  <text>{{ item.coupon_title }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="hjtext"
            >合计：<text>￥{{ hjNum }}</text></view
          >
        </view>
        <!-- 支付方式 -->
        <view class="ulbox" style="padding: 0 20rpx">
          <view class="libo flex" @click="zfFun(1)">
            <text>在线支付</text>
            <label class="radio" style="pointer-events: none">
              <radio
                style="transform: scale(0.8)"
                color="#007AF0"
                value="1"
                :checked="radiovalue1"
            /></label>
          </view>
          <view class="libo flex ac" @click="zfFun(2)">
            <text>余额支付</text>
            <label class="radio" style="pointer-events: none">
              <radio
                style="transform: scale(0.8)"
                color="#007AF0"
                value="1"
                :checked="radiovalue2"
            /></label>
          </view>
        </view>
        <!-- 提示 -->
        <view class="tstext flex">
          <image :src="`${store.imgDomain}porder_3.png`" mode="scaleToFill" />
          <view v-html="texts"></view>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="bottoms flex">
        <text>
          <text v-if="hjNum != 0">￥</text>
          <text style="font-size: 30rpx">{{
            hjNum == 0 ? '免费预约' : hjNum
          }}</text>
        </text>
        <view class="btns" @click="createServiceOrder">立即下单</view>
      </view>
    </view>
    <y-drawer
      ref="drawerRef"
      :borderRadius="20"
      :showMask="true"
      :maskClosable="true"
      :length="1000"
    >
      <view class="title">
        <view class="t1">请选择上门时间</view>
      </view>
      <view class="timebox" v-if="TimeList.length">
        <scroll-view class="left" scroll-y="true">
          <view
            class="times"
            :class="{ ac: indexs === index }"
            v-for="(item, index) in TimeList"
            :key="index + 1"
            @click="(indexs = index), (timeIs = '')"
          >
            {{ `${item.date}(${item.week})` }}
          </view>
        </scroll-view>
        <scroll-view class="right" scroll-y="true">
          <view
            class="timer"
            :class="{ ac: timeIs === item }"
            v-for="(item, index) in TimeList[indexs].timeSegments"
            :key="index + 1"
            @click="(timeIs = item), drawerRef.close()"
          >
            <text>{{ item }}</text>
            <uni-icons
              v-if="timeIs === item"
              type="checkmarkempty"
              size="18"
              color="#2F80FF"
            ></uni-icons>
          </view>
        </scroll-view>
      </view>
    </y-drawer>
    <!-- 优惠券具体数据 -->
    <y-drawer
      ref="drawerRef2"
      :borderRadius="20"
      :showMask="true"
      :maskClosable="true"
      :length="1000"
      title="优惠"
    >
      <scroll-view
        class="body yhbox"
        scroll-y="true"
        v-if="OrderInfo.valid_coupons?.length"
      >
        <view
          class="libox"
          v-for="(item, index) in OrderInfo.valid_coupons"
          :key="index + 1"
          @click="radioFun(item)"
        >
          <view class="left">
            <view class="t1">{{ item.coupon_title }}</view>
            <view class="t2">{{
              `${formatTimestamp(item.validity_start_at)}~${formatTimestamp(
                item.validity_end_at,
              )}`
            }}</view>
            <view class="t3">
              {{ item.coupon_desc }}
            </view>
          </view>
          <view class="right">
            <view class="mang" v-if="item.coupon_type === 1">
              <text>{{ item.reduce_price }}</text
              >元
            </view>
            <view class="mang" v-else-if="item.coupon_type === 2">
              <text>{{ item.discount }}</text
              >折
            </view>
            <view class="mang" v-else>免上门券</view>
            <view class="tj">
              {{ item.is_superposition === 1 ? '可叠加' : '不可叠加' }}</view
            >
            <label class="radio" style="pointer-events: none">
              <radio
                @change="(e) => radioFun(e, item)"
                style="transform: scale(0.8)"
                color="#007AF0"
                value="1"
                :checked="item.radiovalue"
            /></label>
          </view>
        </view>
      </scroll-view>
    </y-drawer>
  </view>
</template>

<script setup>
import {
  ref,
  computed,
  reactive,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import Drawer from '@/components/Drawer.vue';
import { formatTimestamp, isPointInAnyGeometry } from '@/utils/validate';
import SearchInput from '@/components/SearchInput.vue';
import generateTimeArray from './placeAnorders.js';

const store = useCounterStore();
const timeIs = ref('');
const indexs = ref(0);
const datas = ref({});
const drawerRef = ref(null);
const drawerRef2 = ref(null);
const types = ref(2);
const goodsbyList = ref([]);
const TimeList = ref([]);
const imgList = ref([]);
const radiovalue1 = ref(true);
const radiovalue2 = ref(false);
const couponList = ref([]);
const formData = reactive({
  goods_id: '',
  user_address_id: '',
  appointment_date: '',
  appointment_start_time: '',
  appointment_end_time: '',
  remark: '',
  order_img: '',
  pay_way: '',
  use_coupon_id_arr: [],
});

onLoad((option) => {});

const radioFun = (item) => {
  if (item.radiovalue) {
    const indexr = couponList.value.findIndex((i) => i?.id === item?.id);
    if (indexr != undefined) {
      item.radiovalue = false;
      couponList.value.splice(indexr, 1);
    }

    return;
  }

  if (item.coupon_type === 3) {
    const items = couponList.value.find((i) => i?.id === item?.id);
    if (items) {
      uni.showToast({
        title: '只可以选择一个免上门券',
        icon: 'none',
      });
      return;
    }
    item.radiovalue = !item.radiovalue;
    couponList.value.push(item);
  }
  if (item.coupon_type === 1) {
    const items = couponList.value.find(
      (i) =>
        (i.is_superposition === 2 || item.is_superposition === 2) &&
        i.coupon_type === item.coupon_type,
    );
    if (items) {
      uni.showToast({
        title: item.is_superposition
          ? '您已选择了该类型的优惠券，不可选择不可叠加的优惠券'
          : '您选择了不可叠加的优惠券，不可继续选择该类型的优惠券',
        icon: 'none',
      });
      return;
    }
    item.radiovalue = !item.radiovalue;
    couponList.value.push(item);
    console.log(couponList.value);
  }
};

const zfFun = (n) => {
  if (n === 1) {
    radiovalue1.value = true;
    radiovalue2.value = false;
  } else {
    radiovalue1.value = false;
    radiovalue2.value = true;
  }
};
// 上传图
const chooseImage = () => {
  uni.chooseImage({
    count: 5 - imgList.value.length,
    sourceType: ['album', 'camera'], // 可选择相册或相机（拍照）
    success: (res) => {
      res.tempFilePaths.forEach((tempFilePath) => {
        onChooseAvatar(tempFilePath); // 单独的单张上传函数
      });
    },
    fail: (err) => {
      console.log('选择图片失败', err);
    },
  });
};
// 选择头像回调
const onChooseAvatar = (tempFilePaths) => {
  uni.uploadFile({
    url: 'https://adm.jinjiangservice.com/index.php/wxapp/common/uploadCommonImage',
    method: 'POST',
    filePath: tempFilePaths,
    formData: {
      file: tempFilePaths,
    },
    header: {
      'Content-Type': 'multipart/form-data',
    },
    name: 'file',
    success(res) {
      imgList.value.push(JSON.parse(res.data).data.path);
    },
  });
};
const OrderInfo = ref({});
const AddressInfo = ref({});

// 获取下单页面信息
const getReadyServiceOrderInfo = async (option) => {
  OrderInfo.value = await request('wxapp/order/getReadyServiceOrderInfo', {
    goods_id: option.id,
  });

  generateTimeArray(
    OrderInfo.value.goods_info?.appointment_start_time,
    OrderInfo.value.goods_info?.appointment_end_time,
  ).then((res) => {
    TimeList.value = [...res];
  });
};
const hbFun = () => {
  if (!OrderInfo.value.valid_coupons?.length) return;
  drawerRef2.value.open();
};
const ts = (title) => {
  uni.showToast({
    title,
    icon: 'none',
  });
};
let isTrue = true;
// 创建服务订单(价格比对中)
const createServiceOrder = async () => {
  if (!isTrue) return;
  isTrue = false;

  if (
    !isPointInAnyGeometry(
      +AddressInfo.value.latitude,
      +AddressInfo.value.longitude,
      service_latitude_and_longitude.value,
    ).isInside
  ) {
    uni.showToast({
      title: '该地址暂无此服务，请重新选择',
      icon: 'none',
    });
    isTrue = true;
    return;
  }

  formData.user_address_id = AddressInfo.value.id;

  if (!timeIs.value) {
    ts('请选择预约日期');
    isTrue = true;
    return;
  }

  const year = TimeList.value[indexs.value].date.slice(0, 4);
  const month = TimeList.value[indexs.value].date.slice(5, 7); // 提取"10"
  const day = TimeList.value[indexs.value].date.slice(8, 10); // 提取"18"

  // 拼接为"YYYY-MM-DD"格式
  formData.appointment_date = `${year}-${month}-${day}`;
  formData.appointment_start_time =
    formData.appointment_date + ' ' + timeIs.value?.split('-')[0] + ':00' || '';
  formData.appointment_end_time =
    formData.appointment_date + ' ' + timeIs.value?.split('-')[1] + ':00' || '';
  formData.order_img = imgList.value.join(',');
  formData.pay_way = radiovalue1.value ? 2 : 1;

  formData.use_coupon_id_arr = couponList.value.map((item) => {
    return item.id || item.coupon.id;
  });
  if (!formData.user_address_id) {
    isTrue = true;
    ts('请选择地址');
    return;
  } else if (!formData.appointment_date) {
    isTrue = true;
    ts('请选择预约日期');
    return;
  }
  const apiTimestamp = await request('wxapp/common/getTimeStamp');
  const timer = new Date(formData.appointment_start_time).getTime();
  if (apiTimestamp * 1000 > timer + 1800000) {
    uni.showToast({
      title: '选择的预约时间已过期，请重新选择',
      icon: 'none',
    });
    generateTimeArray(
      OrderInfo.value.goods_info?.appointment_start_time,
      OrderInfo.value.goods_info?.appointment_end_time,
    ).then((res) => {
      TimeList.value = [...res];
    });
    return;
  }

  const data = await request(
    'wxapp/order/createServiceOrder',
    formData,
    'post',
  );
  if (formData.pay_way === 2) {
    console.log('all', allPriceInfo.value);
    console.log('all2', data);
    for (let key in data) {
      if (!['wx_app_pay_param', 'tid', 'order_id'].includes(key)) {
        if (+data[key] != +allPriceInfo.value[key]) {
          console.log(key, +data[key], +allPriceInfo.value[key]);
          isTrue = true;
          ts('计算价格不正确，请核对');
          return;
        }
      }
    }
  }

  uni.requestSubscribeMessage({
    tmplIds: [
      'itx-O29FfAZkKxfDCr_tIoVuec94hOrstNMp9DBa-LA',
      'HYGR--s2kIrorPASEapdjyPBeCQtJtLJPC8c5YswS5c',
      'h0oKkAjvTDW4EOPnNMMe0GGj3DcxMMwSbkuaTMvBG0U',
      'ZYRILorSS7Y2MNh6kp0Vbf2lMfNcaxC61kXL8lneOvQ',
    ], // 替换为实际模板ID，

    complete(err) {
      if (formData.pay_way === 1 || hjNum.value == 0) {
        uni.reLaunch({
          url: `/pages/my/paymentInquiry?tid=${data.tid}&index=2`,
        });
      } else {
        wx.requestPayment({
          timeStamp: data.wx_app_pay_param.timeStamp,
          nonceStr: data.wx_app_pay_param.nonceStr,
          package: data.wx_app_pay_param.package,
          signType: data.wx_app_pay_param.signType,
          paySign: data.wx_app_pay_param.paySign,
          success: function (res) {
            uni.reLaunch({
              url: `/pages/my/paymentInquiry?tid=${data.tid}&index=2`,
            });
          },
          fail: async function (err) {
            await request(
              'wxapp/user/deleteServiceOrder',
              { service_order_id: data.order_id },
              'post',
            );
            uni.showToast({
              title: '支付失败',
              icon: 'none',
            });
          },
          complete: function (res) {
            isTrue = true;
          },
        });
      }
    },
  });
};

// 所有价格
const allPriceInfo = computed(() => {
  // 原价
  const original_price =
    OrderInfo.value?.goods_info?.goods_type == 1
      ? (
          +OrderInfo.value?.goods_info?.buy_price +
          +OrderInfo.value?.goods_info?.housefee_price
        ).toFixed(2)
      : (+OrderInfo.value?.goods_info?.housefee_price).toFixed(2);
  // 会员折扣
  const discount = +OrderInfo.value?.user_info?.level_percent;
  // 会员折扣价
  const discount_price = (original_price * (discount / 100)).toFixed(2);
  // 优惠券
  const coupon_price = couponList.value
    .reduce((a, b) => {
      if (b.coupon_type === 1) {
        a += +b.reduce_price;
      } else if (b.coupon_type === 3) {
        a += +OrderInfo.value?.goods_info?.housefee_price * (discount / 100);
      }
      return a;
    }, 0)
    .toFixed(2);

  const deduct_housefree_amount = couponList.value.find(
    (i) => i.coupon_type === 3,
  )
    ? ((OrderInfo.value?.goods_info?.housefee_price * discount) / 100).toFixed(
        2,
      )
    : 0;
  const num1 = couponList.value.reduce((a, b) => {
    if (b.coupon_type === 1) {
      a += +b.reduce_price;
    }
    return a;
  }, 0);
  const deduct_voucher_amount = (
    num1 > discount_price ? +discount_price : num1
  ).toFixed(2);
  const discount_goods_amount =
    OrderInfo.value?.goods_info?.goods_type == 1
      ? (+OrderInfo.value?.goods_info?.buy_price * (discount / 100)).toFixed(2)
      : 0;
  const discount_housefee_amount = (
    OrderInfo.value?.goods_info?.housefee_price *
    (discount / 100)
  ).toFixed(2);
  const discount_total_amount = discount_price;
  const original_goods_amount =
    OrderInfo.value?.goods_info?.goods_type == 1
      ? (+OrderInfo.value?.goods_info?.buy_price).toFixed(2)
      : 0;
  const original_housefee_amount = (+OrderInfo.value?.goods_info
    ?.housefee_price).toFixed(2);
  const original_total_amount = original_price;
  const pay_amount = (
    +discount_price - +coupon_price < 0 ? 0 : +discount_price - +coupon_price
  ).toFixed(2);

  return {
    original_price,
    discount,
    discount_price,
    coupon_price,
    deduct_housefree_amount,
    deduct_voucher_amount,
    discount_goods_amount,
    discount_housefee_amount,
    discount_total_amount,
    original_goods_amount,
    original_housefee_amount,
    original_total_amount,
    pay_amount,
  };
});

// 合计
const hjNum = computed(() => {
  let nums = (
    +allPriceInfo.value.discount_price - +allPriceInfo.value.coupon_price
  ).toFixed(2);

  if (nums < 0) {
    nums = 0;
  }
  return nums;
});

// 获取用户默认下单地址数据
const getDefaultUserAddress = async () => {
  if (store.addressInfo.id) {
    AddressInfo.value = { ...store.addressInfo };
  } else {
    AddressInfo.value = await request('wxapp/order/getDefaultUserAddress');
  }
  store.addressInfo = {};
  // if (AddressInfo.value.id) return;
  // try {

  // } catch {
  //   AddressInfo.value = { ...store.addressInfo };
  //   store.addressInfo = {};
  // }
};
watch(
  () => AddressInfo.value,
  (val) => {
    if (val.id && service_latitude_and_longitude.value) {
      if (
        !isPointInAnyGeometry(
          +val.latitude,
          +val.longitude,
          service_latitude_and_longitude.value,
        ).isInside
      ) {
        uni.showToast({
          title: '该地址暂无此服务，请重新选择',
          icon: 'none',
        });
      }
    }
  },
  { deep: true },
);

const texts = ref('');
const service_latitude_and_longitude = ref('');
store.getParamValByKey('ready_service_order_notice_text').then((res) => {
  texts.value = res;
});
store.getParamValByKey('service_latitude_and_longitude').then((res) => {
  service_latitude_and_longitude.value = JSON.parse(res);
  console.log(service_latitude_and_longitude.value);
});

onLoad((option) => {
  formData.goods_id = option.id;
  getReadyServiceOrderInfo(option);
});
onShow(() => {
  getDefaultUserAddress();
});
</script>

<style scoped lang="scss">
.topbars {
  position: relative;
  z-index: 9;
}

.page_content {
  box-sizing: border-box;
  padding: 20rpx 20rpx 110rpx;
  .topimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 372rpx;
  }
  .centerb {
    position: relative;
    z-index: 2;
  }
  .topbox {
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    border: 1rpx solid #437ef6;
    .dztext {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
      .t1 {
        font-size: 30rpx;
        font-weight: 700;
        margin-bottom: 10rpx;
      }
      .t2 {
        font-size: 24rpx;
        color: #999;
      }
    }
    .dzimg {
      width: 42rpx;
      height: 44rpx;
      flex-shrink: 0;
    }
    .text {
      margin: 0 20rpx;
    }

    .timeb {
      line-height: 60rpx;
      background-color: #eef6ff;
      border-radius: 10rpx;
      box-sizing: border-box;
      padding: 0 30rpx;
      font-size: 24rpx;
      display: flex;
      justify-content: space-between;
      .t2 {
        display: flex;
        align-items: center;
        color: #368dff;
      }
    }
  }
  .centerbox {
    position: relative;
    margin: 20rpx 0;
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    border: 1rpx solid #437ef6;
    .dbj {
      position: absolute;
      top: 0;
      right: 0;
      padding: 10rpx 20rpx;
      color: #fff;
      border-radius: 0 20rpx 0 20rpx;
      font-size: 24rpx;
      background-color: #ff9a18;
    }
    .tb1 {
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #c4deff;
      .tbtop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .himg {
          width: 140rpx;
          height: 140rpx;
          margin-right: 40rpx;
        }
        .tbox {
          .t1 {
            font-size: 30rpx;
            font-weight: 700;
            margin-bottom: 12rpx;
          }
          .t2 {
            color: #ff0000;
          }
        }
        .rtext {
          display: flex;
          align-items: center;
        }
      }
      .bz {
        margin-top: 20rpx;
        text {
          margin-right: 30rpx;
        }
      }
    }
    .tb2 {
      padding-top: 30rpx;
      .scb {
        margin-top: 20rpx;
        border: 1rpx dashed #7cabd7;
        width: 150rpx;
        height: 150rpx;
        border-radius: 20rpx;
      }
    }
  }
  .ulbox {
    position: relative;
    margin: 20rpx 0;
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    border: 1rpx solid #437ef6;
    .libo {
      box-sizing: border-box;
      padding: 20rpx;
      border-bottom: 1rpx solid #437ef6;
      justify-content: space-between;
      &.ac {
        border: none;
      }
      .t3 {
        color: #fff;
        font-size: 20rpx;
        background-color: #ff362e;
        border-radius: 10rpx;
        padding: 5rpx 10rpx;
      }
    }
    .hjtext {
      display: flex;
      padding: 20rpx 0 10rpx;
      color: #999;
      justify-content: flex-end;
      text {
        color: #ff2b15;
      }
    }
    margin-bottom: 20rpx;
  }
}
.tstext {
  padding: 30rpx;
  box-sizing: border-box;
  font-size: 20rpx;
  color: $uni-text-color-grey;
  image {
    width: 28rpx;
    height: 28rpx;
    flex-shrink: 0;
    margin-right: 20rpx;
  }
}
.bottoms {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  background-color: #fff;
  height: 100rpx;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 50rpx;
  color: #ff1900;
  .btns {
    font-size: 30rpx;
    color: #fff;
    line-height: 60rpx;
    padding: 0 100rpx;
    border-radius: 30rpx;
    background-color: #0080f1;
  }
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 20rpx;

  .t1 {
    color: #000;
    font-weight: 700;
    font-size: 30rpx;
    margin-bottom: 20rpx;
  }
  .t2 {
    color: #ffaa1b;
  }
}
.timebox {
  display: flex;
  height: 90%;
  .left {
    width: max-content;
    height: 100%;
    .times {
      color: $uni-text-color-grey;
      padding: 20rpx 30rpx;
      background-color: #eaf2fc;
      &.ac {
        color: #409bf4;
        background-color: #fff;
      }
    }
  }
  .right {
    flex: 1;
    box-sizing: border-box;
    padding: 20rpx;
    overflow-y: auto;

    .timer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #7bc5ff;
      height: 50rpx;
      &.ac {
        color: #2f80ff;
      }
    }
  }
}
.ulimgbox {
  margin: 20rpx 0;
  display: flex;
  flex-wrap: wrap;
  .lib {
    width: 150rpx;
    margin-right: 20rpx;
    margin-bottom: 10rpx;
    display: flex;
    flex-direction: column;
    position: relative;
    .close2_img {
      position: absolute;
      top: -15rpx;
      right: -15rpx;
      width: 30rpx;
      height: 30rpx;
    }
    image {
      border-radius: 20rpx;
      width: 150rpx;
      height: 150rpx;
    }
  }
}
.yhbox {
  box-sizing: border-box;
  padding: 20rpx;
  height: 90%;
  .libox {
    border-radius: 20rpx;
    border: 1rpx solid #999;
    display: flex;
    margin-bottom: 20rpx;
    &.ac {
      filter: grayscale(1);
    }
    .left {
      box-sizing: border-box;
      padding: 20rpx;
      flex: 1;
      .t1 {
        font-size: 30rpx;
        font-weight: 700;
        margin-bottom: 10rpx;
      }
      .t2 {
        font-size: 24rpx;
        color: $uni-text-color-grey;
        padding-bottom: 20rpx;
        border-bottom: 1rpx dashed #999;
      }
      .t3 {
        margin-top: 20rpx;
        font-size: 24rpx;
        color: $uni-text-color-grey;
      }
    }
    .right {
      width: 30%;
      background-color: #fbf0de;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .mang {
        color: #dfb266;
        font-size: 24rpx;
        margin-bottom: 10rpx;
        text {
          font-size: 50rpx;
          font-weight: 700;
        }
      }
      .tj {
        margin: 20rpx 0;
        color: #b78746;
        font-size: 20rpx;
      }
      .lqbtn {
        line-height: 50rpx;
        padding: 0 25rpx;
        border-radius: 25rpx;
        background-color: #f2d19c;
        color: #462d19;
        &.ac {
          filter: grayscale(1);
        }
      }
    }
  }
}
.t3List {
  display: flex;
  flex-direction: column;
}
.libo {
  .t4 {
    margin-bottom: 10rpx;
    &.ac {
      margin-bottom: 0;
    }
  }
}
.wdz_box {
  flex-direction: column;
  .xq_img {
    width: 60rpx;
    margin-bottom: 10rpx;
  }
}
</style>
